<script setup lang="ts">
import { ref } from 'vue'
import axios from '../src/axios/index'

const form = ref({
  username: '',
  password: ''
})

const login = async () => {
  const res = await axios.post('user/login', form.value)
  localStorage.setItem('access_token', res.data.access_token)
  localStorage.setItem('refresh_token', res.data.refresh_token)
}

const getUserInfo = async () => {
  // 并发请求
  await Promise.all([
    axios.get('user/info?id=1'),
    axios.get('user/info?id=2'),
    axios.get('user/info?id=3')
  ])
}
</script>

<template>
  <div>

    <el-form label-width="80px" style="max-width: 400px">
      <el-form-item lang=" username ">
        <el-input v-model="form.username" style="width: 144.928rpx" placeholder="username" />
      </el-form-item>

      <el-form-item lang=" password ">
        <el-input v-model="form.password" type="password" style="width: 144.928rpx" placeholder="password" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>

    <div>
      <el-button type="primary" @click="getUserInfo">获取用户信息</el-button>
    </div>

  </div>

</template>

<style scoped></style>
